<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <title>Orion Premier League</title>
    <link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon" />
    <link href="@System.Web.Optimization.BundleTable.Bundles.ResolveBundleUrl("~/Content/css")" rel="stylesheet" type="text/css" />
    <link href="@System.Web.Optimization.BundleTable.Bundles.ResolveBundleUrl("~/Content/themes/base/css")" rel="stylesheet" type="text/css" />
    <script src="@System.Web.Optimization.BundleTable.Bundles.ResolveBundleUrl("~/Scripts/js")"></script>
    <script src="@Url.Content("~/Scripts/jquery.signalr.min.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/signalr/hubs")" type="text/javascript"></script>
    <meta name="viewport" content="width=device-width" />
    <script type="text/javascript">// <![CDATA[
        $(function () {
            // Proxy created on the fly
            var hub = $.connection.broadcastHub;
            $shape = $('#shape');

            hub.shapeMoved = function (cid, x, y) {
                //if (cid != $.connection.broadcastHub.id) {
                $shape.css({ left: x, top: y });
                //}
            }
            // Declare a function on the blog hub so the server can invoke it
            var msgcnt = 0;
            hub.addMessage = function (message, sessnId, append) {
                var sessId = $('#sessinId').val();
                if (sessId != sessnId) {
                }
                msgcnt++;
                if (msgcnt > 0) {
                    $('#chatlist').append(message);
                }
                //}
            };

            // Start the connection
            $.connection.hub.start();
            $.connection.hub.start().done(function () {
                $shape.draggable({
                    drag: function () {
                        hub.moveShape(this.offsetLeft, this.offsetTop || 0);
                    }
                });
            });
            //            $("#Post").keyup(function (event) {
            //                // Call the send method on the server

            //                var sessId = $("#sessinId").val();
            //                if (event.keyCode >= 65 && event.keyCode <= 122) {
            //                    if (event.shiftKey || (event.keyCode == 32)) {
            //                        hub.send(String.fromCharCode(event.keyCode), sessId, true);
            //                    }
            //                    else {
            //                        hub.send(String.fromCharCode(event.keyCode + 32), sessId, true);
            //                    }
            //                }
            //                else {
            //                    hub.send($("#Post").val(), sessId, false);
            //                }
            //            });

            $('#send').click(function (e) {
                var sessId = $("#sessinId").val();
                if (event.keyCode >= 65 && event.keyCode <= 122) {
                    if (event.shiftKey || (event.keyCode == 32)) {
                        hub.send($('#new-message').val(), sessId, true);
                    }
                    else {
                        hub.send($('#new-message').val(), sessId, true);
                    }
                }
                else {
                    hub.send($('#new-message').val(), sessId, false);
                }
            });
        });
// ]]></script>
    <style type="text/css">
        #shape { width: 200px; height: 200px; border: solid 1px red; position: absolute; background: #ccc; z-index: 10000000; display: none; }
    </style>
</head>
<body>
    <div id="shape">
    </div>
    <input id="sessinId" type="hidden" value="@Session.SessionID" />
    <div id="container">
        <div id="header">
            <h1 id="header-logo">
                <a href="/" style="background-image: url(/content/images/3bubbles.png); background-repeat: no-repeat;
                    background-position-x: 94%;">
                    <img src="/content/images/logo.png" alt="Orion Premiur League" id="logo-print" />
                    <div id="tellme">
                    </div>
                    <input id="speech" type="text" speech="speech" x-webkit-speech="x-webkit-speech"
                        style="float: right;" onspeechchange="processspeech();" onwebkitspeechchange="processspeech();" />
                </a>
            </h1>
        </div>
        <div id="nav">
            <ul id="nav-main">
                <li id="home" class="active"><a href="/">Home </a></li>
                <li id="news" class=""><a  href="/News/index/@ViewBag.CurrentSeason">News</a></li>
                <li id="fixtures" class=""><a  href="/Fixtures/Index/@ViewBag.CurrentSeason">Fixtures</a></li>
                <li id="results" class="" style="display: none;"><a href="/Results/index/@ViewBag.CurrentFixture">
                    Results</a></li>
                <li id="players" class="" style="display: none;"><a href="/Players">Players</a></li>
                <li id="teams" class="" style="display: none;"><a href="/Teams">Teams</a></li>
                <li id="league" class=""><a href="/League/index/@ViewBag.CurrentSeason">League</a></li></ul>
            <div id="nav-shadow">
            </div>
        </div>
        <div id="content">
            <div class="leftNav floatleft">
                @RenderSection("LeftNav", false)
            </div>
            @RenderBody()
        </div>
        <div id="footer" style="text-align: center;">
            Technical support by ORTIA
        </div>
    </div>
    <script type="text/javascript">
        function processspeech() {
            //alert($('#speech').val());
            $.ajax({
                type: "GET",
                url: '@Url.Content("~/Home/speech")',
                data: { data: $('#speech').val() },
                contentType: "application/json; charset=utf-8",
                cache: false,
                dataType: "html",
                success: function (result) {
                    result = result.replace(/"/gi, '');
                    debugger;
                    if (result == "error") {
                        alert($('#speech').val() + '-speech could not be recognised');
                    }
                    else {
                        window.location.href = '@Url.Content("~/")' + result;
                    }
                },
                error: function (result) {
                }
            });
        }
    </script>
</body>
</html>
